<template>
  <a-config-provider :locale="locale">
    <div class="deviceDetail-box">
      <!-- 基本信息 -->
      <h2>设备详情</h2>
      <div style="display:flex;">
        <p>校区名称：<a-tag color="red">{{ campusName }}</a-tag></p>
        <p>设备台数：<a-tag color="red">{{ total }}台</a-tag></p>
      </div>
      <!-- 表格 -->
      <div class="deviceDetail-box-center">
        <a-table
         :columns="columns" 
         :data-source="list" 
         :pagination="false" 
         :rowKey="record => record.id"
         :loading="tableLoading"
         >
          <span slot="num" slot-scope="text, record, index">
            {{ (pageNum-1) * pageSize + parseInt(index) + 1 }}
          </span>
          <span slot="manageStatusStr" slot-scope="text, record">
            <span v-if="record.manageStatusStr === '启用'">启用</span>
            <span v-else style="color:#ccc;">停用</span>
          </span>
          <span slot="isOnLine" slot-scope="text, record">
            <span v-if="record.isOnLine === '在线'">在线</span>
            <span v-else style="color:#ccc;">离线</span>
          </span>
          <span slot="bindStatusStr" slot-scope="text, record">
            <a-tag v-if="record.bindStatusStr === '已绑定'" color="#87d068">已绑定</a-tag>
            <a-tag v-else color="#f50">未绑定</a-tag>
            <a-tooltip placement="top">
              <template slot="title">
                <span>唯一码：{{ record.pcNo }}</span>
                <span>绑定时间：{{ record.bindTime }}</span>
              </template>
              <a v-if="record.bindStatusStr === '已绑定'">查看</a>
            </a-tooltip>
          </span>
          <span slot="action" slot-scope="text, record">
            <a v-if="record.manageStatusStr === '启用'" style="color:#f50;margin-left:8px;" @click="disuseFn(record)">停用</a>
            <a v-if="record.manageStatusStr !== '启用'" style="margin-left:8px;" @click="enableFn(record)">启用</a>
            <a v-if="record.manageStatusStr === '启用'" style="margin-left:8px;" @click="bindFn(record)">绑定</a>
            <a style="margin-left:8px;" @click="addRemark(record)">备注</a>
            <a style="color:#f50;margin-left:8px;" @click="delFn(record)">删除</a>
          </span>
        </a-table>
      </div>
      <!-- 添加备注弹框 -->
      <a-modal
        title="备注"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <a-textarea placeholder="请输入备注信息" v-model="text"></a-textarea>
      </a-modal>
    </div>
  </a-config-provider>
</template>
<script>
import Fingerprint2 from '@/static/fingerprint2' // 引入fingerprintjs2
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
const columns = [
  {
    title: '序号',
    dataIndex: 'num',
    key: 'num',
    width: 100, 
    align: 'center',
    scopedSlots: { customRender: 'num' }
  },
  {
    title: '序列号',
    dataIndex: 'deviceName',
    key: 'deviceName',
    scopedSlots: { customRender: 'deviceName' }
  },
  {
    title: '后台管理状态',
    dataIndex: 'manageStatusStr',
    key: 'manageStatusStr',
    scopedSlots: { customRender: 'manageStatusStr' }
  },
  {
    title: '设备使用状态',
    key: 'isOnLine',
    dataIndex: 'isOnLine',
    scopedSlots: { customRender: 'isOnLine' },
  },
  {
    title: '与电脑绑定状态',
    key: 'bindStatusStr',
    dataIndex: 'bindStatusStr',
    scopedSlots: { customRender: 'bindStatusStr' },
  },
  {
    title: '备注',
    key: 'remark',
    dataIndex: 'remark',
    scopedSlots: { customRender: 'remark' },
    width:200,
    ellipsis: true,
  },
   {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  data(){
    return {
      locale: zhCN,
      list:[],
      campusName:'',
      total:'',
      columns,
      pageNum:1, // 当前页
      pageSize:10, // 当前页展示条数
      visible:false, // 弹框开关
      markId:'', // 备注信息当前的id
      text:'', // 备注信息
      tableLoading:false,
    }
  },
  created(){
    this.getDataList()
    // 不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒，以确保指纹一致。
    if (window.requestIdleCallback) {
      requestIdleCallback(() => {
        this.createFingerprint();
      });
    } else {
      setTimeout(() => {
        this.createFingerprint();
      }, 500);
    }
  },
  methods: {
    // 创建浏览器指纹
    createFingerprint() {
      // 浏览器指纹
      // const fingerprint = Fingerprint2.get((components) => { // 参数只有回调函数时，默认浏览器指纹依据所有配置信息进行生成
      //   const values = components.map(component => component.value); // 配置的值的数组
      //   const murmur = Fingerprint2.x64hash128(values.join(), 31); // 生成浏览器指纹
      //   localStorage.setItem('browserId', murmur); // 存储浏览器指纹，在项目中用于校验用户身份和埋点
      // });
      let options = {
        excludes: {
          language: true, // 语言类型
          colorDepth: true, // 目标设备或缓冲器的调色板比特深度
          deviceMemory: true, // 设备内存
          pixelRatio: true, // 设备像素比
          availableScreenResolution: true, // 屏幕宽高
          timezoneOffset: true, // 本地时间与GMT时间差 以分钟为单位
          timezone: true, // 时区
          //sessionStorage: true, // 是否会话存储
          //localStorage: true, // 是否具有本地存储
          indexedDb: true, // 
          addBehavior: true, // ie是否指定的addBehavior
          openDatabase: true, // 是否打开DB
          cpuClass: true, // 浏览器运行的cpu等级
          doNotTrack: true, // do-not-track设置
          plugins: true, // 浏览器插件信息
          canvas: true, // 使用canvas绘图
          webglVendorAndRenderer: true, // 具有大量的webgl指纹子集
          adBlock: true, // 是否安装adblock
          hasLiedLanguages: true, // 用户是否篡改了语言
          hasLiedResolution: true, // 用户是否篡改了分辨率
          hasLiedOs: true, // 用户是否篡改了操作系统
          hasLiedBrowser: true, // 用户是否篡改了浏览器
          touchSupport: true, // 触摸屏幕和检测能力
          audio: false, // 音频处理
          enumerateDevices: true, // 可用的多媒体输入和输出设备的信息
          hardwareConcurrency: true, // 可用于运行在用户计算机的线程的逻辑处理器的数量
        }
      };
      Fingerprint2.get(options,function (components) {
          const murmur = Fingerprint2.x64hash128(components.map(function (pair) {
              return pair.value
          }).join(), 31)
          console.log(components)
          console.log(murmur)
          localStorage.setItem('browserId', murmur); // 存储浏览器指纹，在项目中用于校验用户身份和埋点
      })
    },
    // 获取数据
    getDataList(){
      this.tableLoading = true
      this.$axios(`/rc/api/device/detail/list?campusId=${this.$route.params.id}`).then(res => {
        if(res.success){
          this.list = res.data
          this.campusName = res.data[0].campusName
          this.total = res.data.length > 0 ? res.data.length : 0
          this.tableLoading = false
        }
      })
    },
    // 停用
    disuseFn(val){
      this.$confirm({
        title: '停用后，后端将无法知悉该设备状态，且设备无法使用，是否继续？',
        okText: '确定',
        cancelText: '取消',
        icon:'close-circle',
        onOk:() => {
          this.$axios(`/rc/api/device/disuse?id=${val.id}`).then(res => {
            if(res.success){
              this.$message.success(res.message)
              this.getDataList()
            }
          })
        }
      });
    },
    // 启用
    enableFn(val){
      this.$confirm({
        title: '启用后该设备将投入使用，确认启用？',
        okText: '确定',
        cancelText: '取消',
        icon:'check-circle',
        onOk:() => {
          this.$axios(`/rc/api/device/enable?id=${val.id}`).then(res => {
            if(res.success){
              this.$message.success(res.message)
              this.getDataList()
            }
          })
        }
      });
    },
    // 添加备注
    addRemark(val){
      this.visible = true
      this.text = val.remark // 获取当前的备注信息
      this.markId = val.id // 获取当前的备注的id
    },
    // 点击取消
    handleCancel() {
      this.visible = false;
    },
    // 点击确定
    handleOk() {
      this.$axios(`/rc/api/device/mark?id=${this.markId}&mark=${this.text}`).then(res => {
        if(res.success){
          this.$message.success(res.message)
          this.visible = false
          this.getDataList()
        }
      })
    },
    // 绑定
    bindFn(val){
      this.$confirm({
        title: '「请在校区指定的电脑上完成该操作，绑定后该台电脑将与设备形成绑定」，若需要更换绑定信息，请登录其他电脑，直接重新绑定',
        okText: '确定',
        cancelText: '取消',
        icon:'control',
        onOk:() => {
          this.$axios(`/rc/api/device/bind?id=${val.id}&uniqueCode=${localStorage.getItem('browserId')}`).then(res => {
            console.log(res)
            if(res.success){
              this.$message.success(res.message)
              this.getDataList()
            }
          })
        }
      });
    },
    // 删除
    delFn(val){
      this.$confirm({
        title: '确定删除和解除绑定？',
        okText: '确定',
        cancelText: '取消',
        icon:'close',
        onOk:() => {
          this.$axios(`/rc/api/device/del?id=${val.id}`).then(res => {
            if(res.success){
              this.$message.success(res.message)
              this.getDataList()
            }
          })
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
  .deviceDetail-box{
    width: 100%;
    height: 100%;
    .deviceDetail-box-center{
      padding-top: 5px;
    }
  }
</style>